<template>
    <div class="user-fixed-form" :active="fixed">
        <div class="user-fixed-form-body" :style="{padding:padding}">
            <slot />
        </div>
    </div>
</template>

<script>
export default {
    props: {
        title: { type: String },
        top: { type: Number, default: 128 },
        padding: { type: String, default: 0 },
    },
    data () {
        return {
            fixed: false,
            scrolling: false,
        };
    },

    methods: {
        checkHeaderActive () {
            const scrollY = document.documentElement.scrollTop || document.body.scrollTop
            this.fixed = scrollY >= this.top
            this.scrolling && clearTimeout(this.scrolling);
            this.scrolling = setTimeout(() => this.scrolling = false, 1500);
        },
    },
    created () {
        this.$on('global:onscroll', this.checkHeaderActive)
    },
    mounted () {
        this.checkHeaderActive();
        window.addEventListener('scroll', this.checkHeaderActive)
    },
    beforeDestroy () {
        window.removeEventListener('scroll', this.checkHeaderActive)
    }

};
</script>

<style scoped lang="scss">
.user-fixed-form {
    position: fixed;
    left: 228px;
    width: calc(100vw - 228px);
    box-sizing: border-box;
    top: -10px;
    opacity: 0;
    z-index: 11;
    height: 60px;
    padding: 0 24px;
    transition: all 0.5s;
    font-size: 16px;
    font-family: Roboto-Medium, Roboto;
    font-weight: 500;
    color: #000000;
    line-height: 20px;
    pointer-events: none;

    .user-fixed-form-body {
        height: 60px;
        max-width: 1080px;
        margin: 0 auto;
        display: flex;
        align-items: center;
    }

    &[active] {
        opacity: 1;
        top: 0;
        .user-fixed-form-body > * {
            pointer-events: all;
        }
    }
}
</style>
